<template>
  <div class="edit_container">
    <van-tabs
      sticky
      class="edit_tab"
      title-active-color="#1C6AD7"
      :active="active"
    >
      <van-tab title="基本资料" name="基本资料">
        <div class="basic">
          <div class="cell">
            <div class="cell_title">上传资料</div>
            <div class="cell_tips">
              1,上传清晰本人照片。2,不符合要求的将无法通过审核
            </div>
            <div class="upload_box">
              <image
                class="slef_avatar"
                :src="selfImg"
                mode="aspectFit"
              ></image>
              <div class="upload_plus" @click="upload">
                <van-icon class="upload_icon" name="plus" />
              </div>
            </div>
          </div>
          <div class="cell_item">
            <div class="cell_name">微信号</div>
            <input
              class="cell_wx"
              :value="bascInfo.wxName"
              auto-focus
              placeholder="请输入微信号"
            />
          </div>
          <div class="cell_item">
            <div class="cell_name">手机号</div>
            <input
              class="cell_wx"
              type="number"
              :value="bascInfo.phone"
              placeholder="请输入手机号"
            />
          </div>
          <div class="cell_item">
            <div class="cell_name">出生日期</div>
            <div class="cell_right" @click="picker(1)">
              <span
                :class="[
                  'cell_val',
                  bascInfo.birth == '请选择' ? '' : 'active_color',
                ]"
                >{{ bascInfo.birth }}</span
              >
              <van-icon class="cell_icon" name="arrow" />
            </div>
          </div>
          <div class="cell_item">
            <div class="cell_name">性别</div>
            <div class="cell_right" @click="picker(2)">
              <span
                :class="[
                  'cell_val',
                  bascInfo.sex == '请选择' ? '' : 'active_color',
                ]"
                >{{ bascInfo.sex }}</span
              >
              <van-icon class="cell_icon" name="arrow" />
            </div>
          </div>
          <div class="cell_item">
            <div class="cell_name">民族</div>
            <div class="cell_right" @click="picker(3)">
              <span
                :class="[
                  'cell_val',
                  bascInfo.nation == '请选择' ? '' : 'active_color',
                ]"
                >{{ bascInfo.nation }}</span
              >
              <van-icon class="cell_icon" name="arrow" />
            </div>
          </div>
          <div class="cell_item">
            <div class="cell_name">身高</div>
            <div class="cell_right" @click="picker(4)">
              <span
                :class="[
                  'cell_val',
                  bascInfo.height == '请选择' ? '' : 'active_color',
                ]"
                >{{ bascInfo.height }}</span
              >
              <van-icon class="cell_icon" name="arrow" />
            </div>
          </div>
          <div class="cell_item">
            <div class="cell_name">体重</div>
            <div class="cell_right" @click="picker(5)">
              <span
                :class="[
                  'cell_val',
                  bascInfo.weight == '请选择' ? '' : 'active_color',
                ]"
                >{{ bascInfo.weight }}</span
              >
              <van-icon class="cell_icon" name="arrow" />
            </div>
          </div>
          <div class="cell_item">
            <div class="cell_name">婚姻</div>
            <div class="cell_right" @click="picker(6)">
              <span
                :class="[
                  'cell_val',
                  bascInfo.marriage == '请选择' ? '' : 'active_color',
                ]"
                >{{ bascInfo.marriage }}</span
              >
              <van-icon class="cell_icon" name="arrow" />
            </div>
          </div>
          <div class="cell_item">
            <div class="cell_name">学历</div>
            <div class="cell_right" @click="picker(7)">
              <span
                :class="[
                  'cell_val',
                  bascInfo.schoolRecord == '请选择' ? '' : 'active_color',
                ]"
                >{{ bascInfo.schoolRecord }}</span
              >
              <van-icon class="cell_icon" name="arrow" />
            </div>
          </div>
          <div class="cell_item">
            <div class="cell_name">现居地</div>
            <div class="cell_right" @click="picker(8)">
              <span
                :class="[
                  'cell_val',
                  bascInfo.nowLat == '请选择' ? '' : 'active_color',
                ]"
                >{{ bascInfo.nowLat }}</span
              >
              <van-icon class="cell_icon" name="arrow" />
            </div>
          </div>
          <div class="cell_item">
            <div class="cell_name">户籍</div>
            <div class="cell_right" @click="picker(9)">
              <span
                :class="[
                  'cell_val',
                  bascInfo.birthLat == '请选择' ? '' : 'active_color',
                ]"
                >{{ bascInfo.birthLat }}</span
              >
              <van-icon class="cell_icon" name="arrow" />
            </div>
          </div>
          <div class="next" @click="next('工作家庭')">下一步</div>
        </div>
      </van-tab>
      <van-tab title="工作家庭" name="工作家庭">
        <div class="work_family">
          <div class="cell_item">
            <div class="cell_name">年薪</div>
            <div class="cell_right" @click="picker(10)">
              <span
                :class="[
                  'cell_val',
                  workFamily.yearlySalary == '请选择' ? '' : 'active_color',
                ]"
                >{{ workFamily.yearlySalary }}</span
              >
              <van-icon class="cell_icon" name="arrow" />
            </div>
          </div>
          <div class="cell_item">
            <div class="cell_name">从事行业</div>
            <div class="cell_right" @click="picker(11)">
              <span
                :class="[
                  'cell_val',
                  workFamily.engagedIndustry == '请选择' ? '' : 'active_color',
                ]"
                >{{ workFamily.engagedIndustry }}</span
              >
              <van-icon class="cell_icon" name="arrow" />
            </div>
          </div>
          <div class="cell_item">
            <div class="cell_name">岗位性质</div>
            <div class="cell_right" @click="picker(12)">
              <span
                :class="[
                  'cell_val',
                  workFamily.jobNature == '请选择' ? '' : 'active_color',
                ]"
                >{{ workFamily.jobNature }}</span
              >
              <van-icon class="cell_icon" name="arrow" />
            </div>
          </div>
          <div class="cell_item">
            <div class="cell_name">职务</div>
            <div class="cell_right" @click="picker(13)">
              <span
                :class="[
                  'cell_val',
                  workFamily.job == '请选择' ? '' : 'active_color',
                ]"
                >{{ workFamily.job }}</span
              >
              <van-icon class="cell_icon" name="arrow" />
            </div>
          </div>
          <div class="cell_item">
            <div class="cell_name">购车情况</div>
            <div class="cell_right" @click="picker(14)">
              <span
                :class="[
                  'cell_val',
                  workFamily.buyCar == '请选择' ? '' : 'active_color',
                ]"
                >{{ workFamily.buyCar }}</span
              >
              <van-icon class="cell_icon" name="arrow" />
            </div>
          </div>
          <div class="cell_item">
            <div class="cell_name">购房情况</div>
            <div class="cell_right" @click="picker(15)">
              <span
                :class="[
                  'cell_val',
                  workFamily.buyHouse == '请选择' ? '' : 'active_color',
                ]"
                >{{ workFamily.buyHouse }}</span
              >
              <van-icon class="cell_icon" name="arrow" />
            </div>
          </div>
          <div class="muti_box mt10">
            <div class="cell_item">
              <div class="cell_name">家庭成员</div>
              <div class="cell_right" @click="multiPicker(1)">
                <span class="cell_val">请选择</span>
                <van-icon class="cell_icon" name="arrow" />
              </div>
            </div>
            <div class="multi_list">
              <div
                class="multif_item"
                v-for="(item, index) in workFamily.familyMembers"
                :key="index"
              >
                {{ item }}
              </div>
            </div>
          </div>
          <div class="next" @click="next('性格爱好')">下一步</div>
        </div>
      </van-tab>
      <van-tab title="性格爱好" name="性格爱好">
        <div class="hobby">
          <div class="cell_item">
            <div class="cell_name">喝酒</div>
            <div class="cell_right" @click="picker(16)">
              <span
                :class="[
                  'cell_val',
                  characteHobbies.drink == '请选择' ? '' : 'active_color',
                ]"
                >{{ characteHobbies.drink }}</span
              >
              <van-icon class="cell_icon" name="arrow" />
            </div>
          </div>
          <div class="cell_item">
            <div class="cell_name">抽烟</div>
            <div class="cell_right" @click="picker(17)">
              <span
                :class="[
                  'cell_val',
                  characteHobbies.smoke == '请选择' ? '' : 'active_color',
                ]"
                >{{ characteHobbies.smoke }}</span
              >
              <van-icon class="cell_icon" name="arrow" />
            </div>
          </div>
          <div class="mt10">
            <textarea
              class="self_content"
              maxlength="100"
              :value="characteHobbies.content"
              placeholder="内心独白,自我介绍"
            ></textarea>
          </div>
          <div class="muti_box mt10">
            <div class="cell_item">
              <div class="cell_name">外貌特征</div>
              <div class="cell_right" @click="multiPicker(2)">
                <span class="cell_val">请选择</span>
                <van-icon class="cell_icon" name="arrow" />
              </div>
            </div>
            <div class="multi_list">
              <div
                class="multif_item"
                v-for="(item, index) in characteHobbies.appearance"
                :key="index"
              >
                {{ item }}
              </div>
            </div>
          </div>
          <div class="muti_box mt10">
            <div class="cell_item">
              <div class="cell_name">兴趣爱好</div>
              <div class="cell_right" @click="multiPicker(3)">
                <span class="cell_val">请选择</span>
                <van-icon class="cell_icon" name="arrow" />
              </div>
            </div>
            <div class="multi_list">
              <div
                class="multif_item"
                v-for="(item, index) in characteHobbies.hobby"
                :key="index"
              >
                {{ item }}
              </div>
            </div>
          </div>
          <div class="muti_box mt10">
            <div class="cell_item">
              <div class="cell_name">性格特征</div>
              <div class="cell_right" @click="multiPicker(4)">
                <span class="cell_val">请选择</span>
                <van-icon class="cell_icon" name="arrow" />
              </div>
            </div>
            <div class="multi_list">
              <div
                class="multif_item"
                v-for="(item, index) in characteHobbies.nature"
                :key="index"
              >
                {{ item }}
              </div>
            </div>
          </div>
          <div class="next" @click="next('finish')">保存</div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 地区 -->
    <van-popup position="bottom" :show="LocPoup" @close="LocPoup = false">
      <van-area
        :area-list="areaList"
        confirm-button-text="确定"
        :value="bascInfo[nowLatVal]"
        @confirm="confirmArea"
        @cancel="LocPoup = false"
      />
    </van-popup>
    <!-- 民族 -->
    <van-popup position="bottom" :show="comPoup" @close="comPoup = false">
      <van-datetime-picker
        v-if="comKey == 1"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="comPoup = false"
        @confirm="selectCom"
      />
      <van-picker
        v-else
        show-toolbar
        :columns="Colums[comKey]"
        :default-index="comeCode"
        @confirm="selectCom"
        @cancel="comPoup = false"
      />
    </van-popup>
    <!-- 多选 -->
    <van-popup
      class="multify_popup"
      position="bottom"
      closeable
      :show="multiPoup"
      @close="closeMultiPoup"
    >
      <div class="multi_box">
        <div
          :class="[
            'multif_item',
            mutifList.includes(item) ? 'active_multif' : '',
          ]"
          v-for="(item, index) in multipleChoice[multiKey]"
          :key="index"
          @click="choose(item)"
        >
          {{ item }}
        </div>
      </div>
      <div class="muti_btn" @click="saveMult">确定</div>
    </van-popup>
  </div>
</template>
<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { areaList, nationList } from "@/static/js/areaList.ts";
import { family, appearance, hobby, nature } from "@/static/js/multiple.js";
import '@/utils/util.js'
import { ref, reactive, onMounted } from "vue";
const active = ref("基本资料");
const selfImg = ref("/static/txw.jpeg");
const LocPoup = ref(false);
const comPoup = ref(false);
const multiPoup = ref(false);
const comKey = ref(1);
const comeCode = ref(0);
const multiKey = ref(1);
const mutifList = reactive([]);
const minDate = ref(getBirth(-60));
const maxDate = ref(getBirth(-10));
// const minDate = ref( new Date().getTime());
// const maxDate = ref( new Date(2019, 10, 1).getTime());
// const currentDate = ref( new Date().getTime());
const nowLatVal = ref("nowLatCode");
const bascInfo = reactive({
  wxName: "",
  phone: "",
  birth: "请选择",
  sex: "请选择",
  nation: "请选择",
  height: "请选择",
  weight: "请选择",
  marriage: "请选择",
  schoolRecord: "请选择",
  nowLat: "请选择",
  nowLatCode: "",
  birthLatCode: "",
  birthLat: "请选择",
});
const workFamily = reactive({
  yearlySalary: "请选择",
  engagedIndustry: "请选择",
  jobNature: "请选择",
  job: "请选择",
  buyCar: "请选择",
  buyHouse: "请选择",
  familyMembers: [],
});
const characteHobbies = reactive({
  drink: "请选择",
  drinkCode: "",
  smoke: "请选择",
  smokeCode: "",
  content: "",
  appearance: [],
  hobby: [],
  nature: [],
});

const multipleChoice = reactive({
  "1": family,
  "2": appearance,
  "3": hobby,
  "4": nature,
});
const heightList = reactive([]);
const weightList = reactive([]);
const Colums = reactive({
  "2": ["男", "女"], //性别
  "3": nationList, //民族
  "4": heightList, //身高
  "5": weightList, //体重
  "6": ["未婚", "短婚未育", "离异", "丧偶"], //婚姻
  "7": [
    "无",
    "小学",
    "初中",
    "中专",
    "高中",
    "大专",
    "本科",
    "硕士",
    "博士",
    "博士后",
  ], //学历
  "10": [
    "4w以内",
    "4w-6w",
    "6w-8w",
    "8w-10w",
    "10w-20w",
    "20w-30w",
    "30w-50w",
    "50-80w",
    "80w-100w",
    "100w-150w",
    "150w-300w",
    "300w-500w",
    "500w以上",
  ], //年薪
  "11": [
    "电商",
    "制造业",
    "公务员",
    "农林牧渔业",
    "医疗/健康",
    "广告/传媒/设计",
    "房产建筑",
    "教育/培训/科研",
    "文化/娱乐/体育",
    "汽车/交通/运输",
    "法律/司法",
    "电子/电器",
    "社会服务",
    "纺织/外贸",
    "美容/形体",
    "营销/市场/策划",
    "装饰装潢",
    "警察",
    "计算机/网络",
    "通信/邮电",
    "酒店/旅游/餐饮",
    "金融/证券",
    "保险",
  ], //从事职业
  "12": [
    "私企员工",
    "有编制",
    "无编制",
    "正式工",
    "劳务工",
    "实习生",
    "私企老板",
    "国企员工",
    "其他",
  ], // 岗位性质
  "13": [
    "工商",
    "银行",
    "普通职员",
    "个体户",
    "律师",
    "运营",
    "发型师",
    "培训",
    "设计",
    "药剂师",
    "护士",
    "医生",
    "老师",
    "保险",
    "服务行业",
    "销售",
    "财务",
    "其他",
  ], // 13-职务
  "14": [
    "婚后购车",
    "已购车无贷款",
    "已购车有贷款",
    "未购车",
    "需要时可购车",
    "其他",
  ], //14-gou车
  "15": [
    "与父母同住",
    "有婚房无贷款",
    "有婚房有贷款",
    "住朋友家",
    "住单位房",
    "婚后购房",
    "租房",
    "需要时购买",
    "房子买在老家",
    "自建房",
  ], //15购房
  "16": ["不喝酒", "偶尔喝", "经常喝", "喜欢喝", "酗酒"], //16 喝酒
  "17": ["不抽烟", "偶尔抽", "经常抽", "喜欢抽", "烟枪"], // 17抽烟
});
const picker = (val) => {
  comKey.value = val;
  // 1-出生日期,2-性别 3-民族,4-身高,5-体重,6-婚姻,7-学历,8-现居地，9-户籍
  // 10-年薪 11-从商业 12岗位性质 13-职务 14-gou车 15购房 16 喝酒 17抽烟

  switch (comKey.value) {
    // case 1:
    //   bascInfo.birth = currentDate.value;
    //   break;
    case 2:
      comeCode.value = Colums[val].indexOf(bascInfo.sex);
      break;
    case 3:
      comeCode.value = Colums[val].indexOf(bascInfo.nation);
      break;
    case 4:
      comeCode.value = Colums[val].indexOf(bascInfo.height);
      break;
    case 5:
      comeCode.value = Colums[val].indexOf(bascInfo.weight);
      break;
    case 6:
      comeCode.value = Colums[val].indexOf(bascInfo.marriage);
      break;
    case 7:
      comeCode.value = Colums[val].indexOf(bascInfo.schoolRecord);
      break;
    case 8:
    case 9:
      LocPoup.value = true;
      return;
    case 10:
      comeCode.value = Colums[val].indexOf(workFamily.yearlySalary);
      break;
    case 11:
      comeCode.value = Colums[val].indexOf(workFamily.engagedIndustry);
      break;
    case 12:
      comeCode.value = Colums[val].indexOf(workFamily.jobNature);
      break;
    case 13:
      comeCode.value = Colums[val].indexOf(workFamily.job);
      break;
    case 14:
      comeCode.value = Colums[val].indexOf(workFamily.buyCar);
      break;
    case 15:
      comeCode.value = Colums[val].indexOf(workFamily.buyHouse);
      break;
    case 16:
      comeCode.value = Colums[val].indexOf(characteHobbies.drink);
      break;
    case 17:
      comeCode.value = Colums[val].indexOf(characteHobbies.smoke);
      break;
  }
  // if([8,9].includes(val)){
  //   LocPoup.value = true
  //   return
  // }
  setTimeout(()=>{comPoup.value = true;},0)
  
};
const upload = () => {
  uni.chooseImage({
    count: 1,
    success(res) {
      selfImg.value = res.tempFilePaths[0];
    },
  });
};
// 地区
const confirmArea = (e) => {
  const { values } = e.detail;
  let str = "",
    code = "";
  values.forEach((item) => {
    str += item.name + " ";
  });
  code = values.at(values.length - 1).code;
  if (comKey.value == 8) {
    nowLatVal.value = "nowLatCode";
    bascInfo.nowLat = str;
    bascInfo.nowLatCode = code;
  } else {
    nowLatVal.value = "birthLatCode";
    bascInfo.birthLat = str;
    bascInfo.birthLatCode = code;
  }
  console.log(str, code, "===");
  LocPoup.value = false;
};
// 公共
const selectCom = (e) => {
  const { value, index } = e.detail;
  comeCode.value = index;
  comPoup.value = false;
  // 1-出生日期,2-性别 3-民族,4-身高,5-体重,6-婚姻,7-学历,8-现居地，9-户籍
  switch (comKey.value) {
    case 1:
      bascInfo.birth = new Date(e.detail).format('yyyy-MM-dd');
      break;
    case 2:
      bascInfo.sex = value;
      break;
    case 3:
      bascInfo.nation = value;
      break;
    case 4:
      bascInfo.height = value;
      break;
    case 5:
      bascInfo.weight = value;
      break;
    case 6:
      bascInfo.marriage = value;
      break;
    case 7:
      bascInfo.schoolRecord = value;
      break;
    case 10:
      workFamily.yearlySalary = value
      break;
    case 11:
      workFamily.engagedIndustry = value
      break;
    case 12:
      workFamily.jobNature = value
      break;
    case 13:
      workFamily.job = value
      break;
    case 14:
      workFamily.buyCar = value
      break;
    case 15:
      workFamily.buyHouse = value
      break;
    case 16:
      characteHobbies.drink = value
      break;
    case 17:
      characteHobbies.smoke = value
      break;
  }
};
// 多选  1家庭成员2外貌特征3兴趣爱好4性格特征
const multiPicker = (val) => {
  multiKey.value = val;
  multiPoup.value = true;
  switch (multiKey.value) {
    case 1:
      selectMore(workFamily.familyMembers);
      break;
    case 2:
      selectMore(characteHobbies.appearance);
      break;
    case 3:
      selectMore(characteHobbies.hobby);
      break;
    case 4:
      selectMore(characteHobbies.nature);
      break;
  }
};
const choose = (val) => {
  const flag = mutifList.indexOf(val);
  if (flag !=-1) {
    mutifList.splice(flag, 1);
  } else {
    mutifList.push(val);
  }
};
// 保存多选
const saveMult = () => {
  switch (multiKey.value) {
    case 1:
      workFamily.familyMembers = [...mutifList];
      break;
    case 2:
      characteHobbies.appearance = [...mutifList];
      break;
    case 3:
      characteHobbies.hobby = [...mutifList];
      break;
    case 4:
      characteHobbies.nature = [...mutifList];
      break;
  }
  closeMultiPoup();
};
const closeMultiPoup = () => {
  multiPoup.value = false;
  mutifList.length = 0;
};
// 身高
const getHeight = () => {
  for (let i = 140; i < 200; i++) {
    heightList.push(i + "cm");
  }
};
// 体重
const getWeight = () => {
  for (let i = 40; i < 100; i++) {
    weightList.push(i + "Kg");
  }
};
const selectMore = (val) => {
  if (val?.length == 0) return;
  console.log(val, "===");
  val.forEach((i) => mutifList.push(i));
};
// 时间
function getBirth(day) {
  var now = new Date();
  const str =
    now.getFullYear() +
    day +
    "-" +
    addZoo(now.getMonth() + 1) +
    "-" +
    addZoo(now.getDate());
  return +new Date(str);
}
function addZoo(num) {
  return num > 9 ? num : "0" + num;
}
const next = (val) => {
  if(val=='finish'){
    let params = {
      ...bascInfo,
      ...workFamily,
      ...characteHobbies,
    }
    console.log(params,'====保存编辑资料')
    uni.navigateBack()
    return;
  }
  active.value = val;
};
onMounted(() => {
  getHeight();
  getWeight();
});
</script>
<style lang="scss" scoped>
.edit_container {
  background-color: #f7f7f7;
  .edit_tab{
    :deep(.van-tabs) {
      .van-tabs__nav{
        .van-tabs__line{
          background-color: #1c6ad7 !important;
        }
      }
    }
  }
  
  .basic,
  .work_family,
  .hobby {
    margin-top: 10px;
  }
  .mt10 {
    margin-top: 10px;
  }
  .cell {
    margin-bottom: 10px;
    background-color: #fff;
    padding: 20rpx;
    .cell_title {
      margin-bottom: 10px;
      font-size: 14px;
      color: rgb(10, 10, 10);
    }
    .cell_tips {
      margin-bottom: 10px;
      font-size: 12px;
      color: #ccc;
    }
    .upload_box {
      display: flex;
      align-items: center;
      .slef_avatar {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .upload_plus {
        background-color: #ccc;
        font-size: 14px;
        color: #fff;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .cell_item {
    padding: 0 10px;
    height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    .cell_name {
      color: #000;
    }
    .cell_wx {
      text-align: right;
    }
    .cell_right {
      display: flex;
      font-size: 14px;
      color: #ccc;
      .cell_val {
        margin-right: 10px;
      }
      .active_color {
        color: #1c6ad7;
      }
    }
  }
  .muti_box {
    background-color: #fff;
    .cell_item {
      border-bottom: 0;
    }
  }
  .multi_list {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    .multif_item {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 5px;
      margin-bottom: 5px;
      min-width: 50px;
      padding: 0 10px;
      height: 30px;
      border-radius: 15px;
      background-color: #1c6ad7;
      font-size: 14px;
      color: #fff;
    }
  }
  .self_content {
    width: 100%;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
  }
  .next {
    margin: 10px 20px;
    background-color: #1c6ad7;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    border-radius: 20px;
  }
}
.multify_popup {
  position: relative;
  .multi_box {
    min-height: 200px;
    margin-top: 60px;
    padding: 0 15px 60px 20px;
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    .multif_item {
      margin-right: 5px;
      margin-bottom: 5px;
      padding: 0 10px;
      min-width: 50px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border-radius: 15px;
      background-color: #f7f7f7;
      font-size: 14px;
      color: #999;
    }
    .active_multif {
      background-color: #1c6ad7;
      color: #fff;
    }
  }
  .muti_btn {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 10px;
    background-color: #1c6ad7;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    border-radius: 20px;
  }
}
</style>
